<template>
	<view class="wrap">
		<view class="title text-lg text-bold text-center flex justify-center align-center">
			<image src="/static/l.png" mode=""></image>
			{{titleNone}}
			<image src="/static/r.png" mode=""></image>
		</view>
    <fu-waterfall v-model="lists" >
      <template v-slot:left="{leftList}">
        <block v-for="(item,index) in leftList" :key="item.id">
          <fu-goods-block :info="item"></fu-goods-block>
        </block>
      </template>
      <template v-slot:right="{rightList}">
        <block v-for="(item,index) in rightList" :key="item.id">
          <fu-goods-block :info="item"></fu-goods-block>
        </block>
      </template>
    </fu-waterfall>
		<uni-load-more :status="status" v-if="lists.length > 5"></uni-load-more>
	</view>
</template>

<script>
  /**
   * @description
   * @param {String} type = index: 首页推荐 userCenter: 个人中心 cart: 购物车 goodsDetail: 商品详情 orderDetail: 订单详情
   * */
	export default {
		props:{
			num: {
				type: Number,
				default: 10
			},
			titleNone:{
				type: String,
				default: '为你推荐'
			},
			type:{
				type:String,
				default:'index'
			}
		},
		data() {
			return {
				lists: [],
				status: 'more',
				page: 1,
        size: 10,
			};
		},
		methods: {
			loadData(){
				if(this.status != 'more') return;
				this.status = 'loading';
				this.$api.post(global.apiUrls.postRecommentGoods, {
					businessSign: this.type,
					page: this.page,
					size: this.num || this.size,
				})
				.then(res => {
					console.log("推荐商品", res);
					if (res.data.code == 1) {
						if (this.page == 1) this.lists = [];
						this.lists.push(...res.data.data.goods_list);
            let num = this.num || this.size;
						if (res.data.data.goods_list.length < num) {
							this.status = 'noMore';
						} else {
							this.status = 'more';
							this.page++;
						}
						uni.stopPullDownRefresh();
					}else{
						this.status = 'more';
						uni.stopPullDownRefresh();
					}
				})
				.catch(err => {
					console.log("获取推荐列表 ERROR => ",err);
					this.status = 'more';
					uni.stopPullDownRefresh();
				})
			},
			refresh(){
				this.page = 1;
				this.status = 'more';
				this.loadData();
			}
		},
		created() {
			this.loadData();
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
    width: 100%;
		.title{
			height: 100rpx;
			line-height: 100rpx;
			image{
				width: 48rpx;
				height: 32rpx;
				margin: 0 24rpx;
			}
		}
		.content{
			padding: 0 20rpx;
		}
	}

</style>
